<template>
    <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"></view>

    <view class="container">
        <!-- 折叠面板 -->
        <uni-collapse>
            <uni-collapse-item title="房间" :open="true" :show-arrow="false" :title-border="'none'">
                <view class="content fade-in" :style="{height: '10%'}">
                    <view class="user">
                        <image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" class="avatar"></image>
                        <text class="username">总分</text>
                    </view>
                    <view class="user">
                        <image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" class="avatar"></image>
                        <text class="username">总分</text>
                    </view>
                    <view class="user">
                        <image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" class="avatar"></image>
                        <text class="username">总分</text>
                    </view>
                </view>
            </uni-collapse-item>
        </uni-collapse>

        <!-- 卡片消息 -->
        <view class="custom-card">
            <!-- 时间*局数区 -->
            <view class="card-time">
                <text class="card-text"> 12:52:49 · 第x局</text>
            </view>
            <!-- 分数区 -->
            <view class="card-score">
                <view class="card-item">
                    <image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"></image>
                    <text class="card-text">3</text>
                </view>
                <view class="card-item">
                    <image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"></image>
                    <text class="card-text">-4</text>
                </view>
                <view class="card-item">
                    <image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"></image>
                    <text class="card-text">4</text>
                </view>
                <view class="card-item">
                    <image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"></image>
                    <text class="card-text">-3</text>
                </view>
            </view>
        </view>

        <!-- 底部区域 -->
        <view class="foot fade-in">
            <button class="beautiful-button" @click="handleClick">
                <text> 第三局 </text>
                <text>（点击结算本局）</text>
            </button>
            <image class="share" src="../../../static/user.png"></image>
            <button class="beautiful-button" @click="handleOtherClick">点击我</button>
        </view>
    </view>
</template>

<script setup>
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();

const handleClick = () => {
    // 这里编写结算本局的逻辑
    console.log('结算本局');
};

const handleOtherClick = () => {
    // 这里编写“点击我”按钮的逻辑
    console.log('按钮被点击');
};
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* 折叠面板 */
.content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.user {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 13px;
}

/* 消息卡片 */
.custom-card {
    display: flex;
    flex-direction: column; /* 改为竖直方向排列 */
    justify-content: space-around;
    align-items: center;
    padding: 20px; /* 增加内边距 */
    margin: 20px;/* 增加外边距，与边界保持合适距离 */
    /* border: 1px solid #ccc; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    border-radius: 8px;
}
.card-time {
    margin-bottom: 20px; /* 在时间区下方添加间距 */
}
.card-score {
    display: flex;
    flex-direction: row; /* 使card-item水平排列 */
    justify-content: space-around; /* 均匀分布子元素 */
    /* align-items: center; */
}
.card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 26px;
}

.card-text {
    font-size: 14px;
    color: #a0a6a7;
    text-align: center;
}

.card-item image {
    width: 55px;
    height: 55px;
    margin-bottom: 5px;
    border-radius: 50%;
}
.foot {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
}

.beautiful-button {
    border: none;
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
}

.share {
    width: 40px;
    height: 40px;
    object-fit: cover;
}
</style>